/**
 * @File   : index.js
 * @Author : xue.xiaoBing
 * @Time   : 2022/2/7 17:58
 * @Desc   : 敬请期待
 **/
import React, {useRef} from "react";
import {notification} from 'antd';

import MainSvg from "src/assets/images/jie/主.svg";
import Svg0 from "src/assets/images/jie/0.svg";
import Svg1 from "src/assets/images/jie/1.svg";
import Svg2 from "src/assets/images/jie/2.svg";
import Svg3 from "src/assets/images/jie/3.svg";
import Svg4 from "src/assets/images/jie/4.svg";
import Svg5 from "src/assets/images/jie/5.svg";
import Svg6 from "src/assets/images/jie/6.svg";
import Svg7 from "src/assets/images/jie/7.svg";
import StayTunedSvg from "src/assets/svgs/stayTuned.svg";

import "./index.sass";

const StayTuned = () => {
    const menuRef = useRef();
    const handleToggle = () => {
        menuRef.current.classList.toggle('active')
    }

    const openNotificationWithIcon = (type, value) => {
        let message = "情人节快乐"
        if (value === 0) {
            notification[type]({
                message: message,
                description:
                    '首签，情人节快乐',
            });
        }else if(value === 1){
            notification[type]({
                message: message,
                description:
                    '贰签，一直健康',
            });
        }else if(value === 2){
            notification[type]({
                message: message,
                description:
                    '叁签，一直快乐',
            });
        }else if(value === 3){
            notification[type]({
                message: message,
                description:
                    '肆签，一直有钱',
            });
        }else if(value === 4){
            notification[type]({
                message: message,
                description:
                    '伍签，一直如意',
            });
        }else if(value === 5){
            notification[type]({
                message: message,
                description:
                    '陆签，一直和睦',
            });
        }else if(value === 6){
            notification[type]({
                message: message,
                description:
                    '柒签，一直进步',
            });
        }else if(value === 7){
            notification[type]({
                message: message,
                description:
                    '捌签，不干家务',
            });
        }

    }
    return (
        <div className={"stay-tuned-page"}>
            <img src={StayTunedSvg} alt="稍作等待"/>
            <div className={"menu"} ref={menuRef}>
                <div className="toggle" onClick={handleToggle}>
                    <img src={MainSvg} alt="情人节快乐"/>
                </div>
                <li className="li-0" onClick={() => openNotificationWithIcon('success',0)}>
                    <span>
                        <img src={Svg0} alt="情人节快乐"/>
                    </span>
                </li>
                <li className="li-1" onClick={() => openNotificationWithIcon('success',1)}>
                    <span>
                        <img src={Svg1} alt="情人节快乐"/>
                    </span>
                </li>
                <li className="li-2" onClick={() => openNotificationWithIcon('success',2)}>
                    <span>
                       <img src={Svg2} alt="情人节快乐"/>
                    </span>
                </li>
                <li className="li-3" onClick={() => openNotificationWithIcon('success',3)}>
                    <span>
                        <img src={Svg3} alt="情人节快乐"/>
                    </span>
                </li>
                <li className="li-4" onClick={() => openNotificationWithIcon('success',4)}>
                    <span>
                       <img src={Svg4} alt="情人节快乐"/>
                    </span>
                </li>
                <li className="li-5" onClick={() => openNotificationWithIcon('success',5)}>
                    <span>
                        <img src={Svg5} alt="情人节快乐"/>
                    </span>
                </li>
                <li className="li-6" onClick={() => openNotificationWithIcon('success',6)}>
                    <span>
                        <img src={Svg6} alt="情人节快乐"/>
                    </span>
                </li>
                <li className="li-7" onClick={() => openNotificationWithIcon('success',7)}>
                    <span>
                        <img src={Svg7} alt="情人节快乐"/>
                    </span>
                </li>
            </div>
        </div>
    )
}

export default StayTuned
 